<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->

		<link rel="stylesheet" href="css/out.css" />

		<link rel="stylesheet" href="css/outForm.css" />

		<link rel="stylesheet" href="css/inForm.css" />

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span @click="handleClickGotoOutList" class="nav-item">域名转入列表</span>
					<span class="nav-item">域名转入</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span @click="handleClickGotoOutList" class="from-title">
							<i class="icon el-icon-back"></i>
							域名转入</span>
					</div>



					<el-form :model="mainForm" :rules="mainrules" ref="mainForm" label-width="136px" class="mainForm demo-ruleForm mt-20">
						<el-form-item label="域名" prop="name">
						
							<el-input placeholder="请输入域名" v-model="mainForm.name" class="input-with-select">
							   <el-select v-model="mainForm.activehouzuiName" slot="append" placeholder="请选择">
							     <el-option v-for="(item,index) in mainForm.houzuiNameOptions"   :label="item.label" :value="item.value"></el-option>
							   </el-select>
							 </el-input>
						</el-form-item>
						

						
						<el-form-item label="域名转移码" prop="transfercode">
							<el-input style="width: 320px" placeholder="请输入域名转移码" v-model="mainForm.transfercode" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="转入费用">
							<span style="color: #FF4949;">{{mainForm.inPrice.toFixed(2)}}元</span>
						</el-form-item>

					</el-form>

				</div>

				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span @click="handleClickGotoOutList" class="from-title">信息</span>
					</div>
					<div class="domainNameIninfo-wrapper mt-20 mb-20">
						<div v-for="(item,index) in accoutInfoGroup" :key="index" class="domainNameIninfo-item">
							<div @click="activeAccoutIndex = index" :class="{'haveBorder':index === activeAccoutIndex}" class="bascInfo  fboxRow">
								<el-radio v-model="activeAccoutIndex" :label="index">{{zanweiCode}} </el-radio>
								<span class="title  nowrapShowpointer">{{item.isNew ? '使用新的域名信息' : '使用账户信息'}}</span>
								<span class="phoneNum">{{handlePhoneNumText(item,index)}}</span>
								<span class="email">{{handleEmailText(item,index)}}</span>
							</div>
							<div v-if="index === activeAccoutIndex" class="accountForm-wrapper">
								<el-form :model="item" :rules="accountFormrules" ref="accountForm" label-width="136px" class="accountForm demo-ruleForm mt-20">
									<el-form-item label="域名联系人姓名" prop="connectPersonName">
										<el-input  :disabled="handledisabled(item,index,'connectPersonName')" style="width: 320px" placeholder="请输入域名联系人姓名" v-model="item.connectPersonName" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="联系电话" prop="phoneNum">
										<el-input :disabled="handledisabled(item,index,'phoneNum')" style="width: 320px" placeholder="请输入联系电话" v-model="item.phoneNum" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="电子邮箱" prop="email">
										<el-input :disabled="handledisabled(item,index,'email')"  style="width: 320px" placeholder="请输入电子邮箱" v-model="item.email" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="地区" prop="id">
										<div class="fboxRow">
											  <el-select :disabled="handledisabled(item,index,'countryId')"  class="countrySelect" v-model="item.countryId" placeholder="请选择国家">
											    <el-option
												 style="width: 320px"
											      v-for="item in countryOptions"
											      :key="item.id"
											      :label="item.label"
											      :value="item.id">
											    </el-option>
											  </el-select>
											  <div class="input-wrapper fboxRow">
												  <el-input :disabled="handledisabled(item,index,'provinceName')"   class="mr-10 ml-10" style="width: 140px" placeholder="请输入省" v-model="item.provinceName" autocomplete="off">
													  <span slot="suffix">省</span>
												  </el-input>
												  <el-input :disabled="handledisabled(item,index,'cityName')" style="width: 140px" placeholder="请输入城市" v-model="item.cityName" autocomplete="off">
													   <span slot="suffix">市</span>
												  </el-input>
											  </div>
										</div>	
									</el-form-item>
									<el-form-item label="联系地址" prop="connectArea">
										<el-input :disabled="handledisabled(item,index,'connectArea')" style="width: 320px" placeholder="请输入联系地址" v-model="item.connectArea" autocomplete="off"></el-input>
									</el-form-item>
									
									<el-form-item label="邮编" prop="postcode">
										<el-input :disabled="handledisabled(item,index,'postcode')" style="width: 320px" placeholder="请输入邮编" v-model="item.postcode" autocomplete="off"></el-input>
									</el-form-item>
									
									<el-form-item style="margin-top: 30px;">
										<div class="buttonWrapper fboxRow">
											<div @click="saveForm('accountForm',item,index)" class="yzButton deep">保存</div>
											<div @click="resetForm('accountForm',index)" class="yzButton noColorTolight  ml-10">取消</div>
										</div>
									</el-form-item>

								</el-form>
							</div>
						</div>
					</div>
					<div @click="submitForm" class="yzButton submit deep">提交</div>

				</div>

			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					let that = this





					// 校验修改手机验证码
					var validateEidtphoneCode = function(rule, value, callback) {

						if (that.phoneCanSendverificationCode === true) {
							callback(new Error('请点击发送手机验证码！'));
						}
						console.log(value, that.phonerightVerificationCode)
						if (value !== that.phonerightVerificationCode) {
							callback(new Error('验证码错误！'));
						} else {
							callback()
						}
					}
					
					// 验证地区
					var validateArea = function(rule, value, callback) {
						let form
						
						that.accoutInfoGroup.forEach( function(item){
							if(item.id === value)  {
								form  = item
							}
						})
						if(form.countryId === undefined  || form.provinceName === undefined || form.cityName === undefined) {
							callback(new Error('请完善地区信息！'));
						}else {
							callback()
						}
						
						
					}
					


					return {
						countryOptions:[{   // 国家可选项
							id:23,
							label:'中国'
						},{
							id:24,
							label:'美国'
						},{
							id:26,
							label:'法国'
						}],
						zanweiCode: ' ', // 占位符
						initAccoutInfoGroup:[], // 原始账户信息数组
						accoutInfoGroup: [{ // 账户信息数组
							id:1,
							isNew: false, // 是否是新域名   默认为false
							phoneNum: '18996482973',
							email: '1025535910@qq.com',
							connectPersonName: undefined,  // 域名联系人姓名
							countryId: undefined, // 选择的国家
							provinceName: undefined , // 输入的 省
							cityName:  undefined, // 输入的 市
							connectArea: undefined, // 联系地址 
							postcode: 12323, // 邮编
						}],
						activeAccoutIndex: 0, // 选中的账户信息
						mainForm: { // 主信息表单
							name: undefined, // 域名
							transfercode: undefined, // 转移码
							inPrice: 53,
							nametype:undefined , // 域名类型
							activehouzuiName:'com', // 选择后缀名
							houzuiNameOptions:[{
								value:'com',
								label:'.com'
							},{
								value:'net',
								label:'.net'
							},{
								value:'org',
								label:'.org'
							},{
								value:'biz',
								label:'.biz'
							},{
								value:'io',
								label:'.io'
							}]   // 后缀名数组
						},

						mainrules: { // 主信息表单的验证规则
							name: [{
								required: true,
								message: '请输入域名',
								trigger: 'blur'
							}],
							transfercode: [{
								required: true,
								message: '请输入转移码',
								trigger: 'blur'
							}, ]
						},
						
						
						accountFormrules: { // 主信息表单的验证规则
							name: [{
								required: true,
								message: '请输入域名',
								trigger: 'blur'
							}],
							transfercode: [{
								required: true,
								message: '请输入转移码',
								trigger: 'blur'
							}],
							id: [{
								required: true,
								validator: validateArea,
								trigger: 'blur'
							}],
							connectArea:[{
								required: true,
								message: '请输入联系地址',
								trigger: 'blur'
							}],
							postcode:[{
								required: true,
								message: '请输入邮编',
								trigger: 'blur'
							}],
							connectPersonName:[{
								required: true,
								message: '请输入域名联系人姓名',
								trigger: 'blur'
							}],
							phoneNum: [{
								required: true,
								message: '请输入手机号',
								trigger: 'blur'
							}, {
								validator: validatephone,
								trigger: 'blur'
							}],
							email:[{
								required: true,
								message: '请输入电子邮箱地址',
								trigger: 'blur'
							},{
									validator: validateEmail,
									trigger: 'blur'
							}]
						},


					}
				},

				methods: {
					
					// 处理是否禁用
					handledisabled: function(item,index,key) {
						if(this.initAccoutInfoGroup[index]  && this.initAccoutInfoGroup[index][key] !== undefined) {
							return true
						}
						return false
					},
					
					handlePhoneNumText:function(item,index) {
						if(this.initAccoutInfoGroup[index]) {
							return  this.initAccoutInfoGroup[index].phoneNum
						}
						return   undefined
					},
					
					handleEmailText: function(item,index) {
						if(this.initAccoutInfoGroup[index]) {
							return  this.initAccoutInfoGroup[index].email
						}
						return   undefined
					},
					
					// 跳转到域名转入列表页面
					handleClickGotoOutList: _throttle(function() {
						window.open('in.html', '_self')
					}),



					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},
					
					// 保存表单
					saveForm: _throttle(function(formName,item,index) {
						let that = this
						this.$refs[formName][0].validate(function(valid) {
							if (valid) {
								that.$message.success('保存表单信息成功')
								// that.initAccoutInfoGroup[index] = item
								// that.$forceUpdate()
							} else {
								return false;
							}
						});
					}),
					// 重置表单
					resetForm:_throttle(function(formName,index) {
						if(this.initAccoutInfoGroup[index].countryId === undefined) {
							this.accoutInfoGroup[index].countryId = undefined
						}
						if(this.initAccoutInfoGroup[index].provinceName === undefined) {
							this.accoutInfoGroup[index].provinceName = undefined
						}
						
						if(this.initAccoutInfoGroup[index].cityName === undefined) {
							this.accoutInfoGroup[index].cityName = undefined
						}
						
						 this.$refs[formName][0].resetFields();
					}),

					
					
					// 提交表单
					submitForm: _throttle(function() {
						let that = this
						let success
						this.$refs.mainForm.validate(function(valid) {
							if (valid) {
							} else {
								that.$message.error('请完善域名表单再提交！')
								success = false
								return false
							}
						});
						if(success === false) {
							return
						}
						this.$refs.accountForm[0].validate(function(valid) {
							if (valid) {
								
							} else {
								that.$message.error('请完善信息表单再提交！')		
								success = false
								return false
							}
						});
						
						
						if(success === false) {
							return
						}
						
						
						this.$message.success('表单提交成功')
						console.log(this.mainForm)
						console.log(this.accoutInfoGroup[this.activeAccoutIndex])
					})
				},
				mounted: function() {
					
					
					if (this.accoutInfoGroup.length && this.accoutInfoGroup.length === 1) {
						this.accoutInfoGroup.push({
							isNew: true, // 是新域名
							id:2

						})
					}
					
					this.initAccoutInfoGroup  = deepCopy(this.accoutInfoGroup)

				}

			})
		</script>
	</body>
</html>
